<template>
  <el-dialog
    v-model="dialog.visible"
    :title="dialogTitle"
    @open="openHandler"
    @close="closeHandler"
    :close-on-click-modal="false"
    append-to-body
    center
  >
    <el-form
      ref="dataForm"
      :rules="formRules"
      :model="entity"
      :disabled="operation == 3"
      label-suffix="："
    >
      <el-row class="padding-lr-20" :gutter="20">
        <el-col :span="24">
          <el-form-item prop="name" label="数据源名称">
            <el-input
              v-model="entity.name"
              placeholder="请输入数据源名称"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="padding-lr-20" :gutter="20">
        <el-col :span="8">
          <el-form-item prop="host" label="host">
            <el-input
              v-model="entity.host"
              placeholder="请输入host"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="port" label="port">
            <el-input
              v-model="entity.port"
              placeholder="请输入port"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item prop="schema" label="schema">
            <el-input
              v-model="entity.schema"
              placeholder="请输入schema"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="padding-lr-20" :gutter="20">
        <el-col :span="12">
          <el-form-item prop="username" label="用户名">
            <el-input
              v-model="entity.username"
              placeholder="请输入用户名"
              clearable
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item prop="password" label="密码">
            <el-input
              v-model="entity.password"
              placeholder="请输入密码"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <cancel-button @click="dialog.visible = false" />
      <save-button v-if="operation != 3" @click="saveHandler" />
    </template>
  </el-dialog>
</template>
<script>
import { save } from '@/api/codegen/datasource'

export default {
  name: 'DataSourceSaveUpdate',
  props: {
    dialog: {
      type: Object,
      required: true,
    },
  },
  emits: ['success'],
  data() {
    return {
      entity: {},
      formRules: {
        name: [
          { required: true, message: '请输入数据源名称', trigger: 'blur' },
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        jdbcUrl: [
          { required: true, message: '请输入jdbcUrl', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    dialogTitle() {
      const titleMap = {
        1: '新建数据源',
        2: '编辑数据源',
        3: '查看数据源',
      }
      return titleMap[this.dialog.operation]
    },
    operation() {
      return this.dialog.operation
    },
  },
  methods: {
    openHandler() {
      if (this.dialog.entity) {
        this.entity = Object.assign({}, this.dialog.entity)
      }
    },
    closeHandler() {
      this.entity = {}
    },
    saveHandler() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          save(this.entity).then(() => {
            this.dialog.visible = false
            this.$message.success('保存成功')
            this.$emit('success')
          })
        }
      })
    },
  },
}
</script>
